<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-12 15:52:50
 * @LastEditors: your name
 * @LastEditTime: 2021-10-15 14:48:16
 * @Description: file content
-->
<template>
  <el-dialog
    :visible="showVisible"
    center
    :show-close="false"
    width="800px"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ '选择icon' }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <div class="pl30 pr30">
      <el-tabs v-model="activeCategory" type="card">
        <el-tab-pane lazy v-for="(icons,category) in categoryMap" :key="category" :label="icons[0].categoryCN" :name="category">
          <div class="category-icons">
            <span
              class="icon-box"
              :class="{active: item.name === icon}"
              v-for="item in icons"
              :key="item.name"
              :title="item.title"
              @click="handleOk(item.name)">
              <IconPark
                size="18"
                :type="item.name"
              />
            </span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </el-dialog>
</template>

<script>
import BdIcons from '@icon-park/vue/icons.json'
import { IconPark } from '@icon-park/vue/es/all'
export default {
  components: {
    IconPark
  },

  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    defaultConfig: {
      type: Object,
      default: () => ({})
    }
  },

  data () {
    return {
      showVisible: false,
      icon: '',
      activeCategory: '',
      categoryMap: {},
      callback: () => {}
    }
  },

  created () {
    const categoryMap = {}
    BdIcons.forEach(element => {
      const category = element.category
      if (categoryMap[category]) {
        categoryMap[category].push(element)
      } else {
        categoryMap[category] = [element]
      }
    })
    this.categoryMap = categoryMap
    this.activeCategory = BdIcons[0].category
  },

  methods: {

    select (icon = '') {
      this.icon = icon
      this.showVisible = true

      return {
        then: (callback) => {
          if (typeof callback === 'function') {
            this.callback = callback
          }
        }
      }
    },

    handleOk (icon) {
      this.showVisible = false
      this.callback(icon)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-box{
  height: 28px;
  width: 28px;
  display: inline-block;
  font-size: 18px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
  border: 1px solid #fff;

  &:hover{
    color: #1890ff;
    border: 1px solid #1890ff;
  }

  &.active{
    color: #1890ff;
    border: 1px solid #1890ff;
  }
}

.category-icons{
  height: 35vh;
  overflow-y: auto;
}
</style>
